<template>
	<section class="todoapp">
			<TodoHeader :arr="list" @add="addFn"></TodoHeader>
			<TodoMain :arr="showList" @del="delFn"></TodoMain>
			<TodoFooter :arr="list" @delShow="delShowFn" @changeType="changeTypeFn"></TodoFooter>
	</section>
</template>

<script>
  // 局部引入
	import TodoHeader from './components/TodoHeader.vue'
	import TodoMain from './components/TodoMain.vue'
	import TodoFooter from './components/TodoFooter.vue'

	// 样式引入 
	import './styles/base.css'
	import './styles/index.css'


	export default {
		data() {
			return {
				list: JSON.parse(localStorage.getItem('Vue_todos')) || [],
				type: 'one'   // 默认展示全部数据
			};
		},

		// 局部注册
		components: {
			   TodoHeader,
				 TodoMain,
				 TodoFooter
		},

		methods: {
			//  todo  ===== 删除对应任务数据
			  delFn(id){
					 this.list = this.list.filter(item => item.id !== id)
				},

			//  todo  ===== 新增对应任务数据
			 addFn(name) {
            this.list.unshift({
								id: +new Date(),
								name,
								isDone: false
						})
			 },

    //   todo ====== 点击清空已完成任务
			 delShowFn() {
           this.list = this.list.filter(item => item.isDone === false)
			 },

  	// todo ===== 接收子组件传过来的数据类型   进行保存
			 changeTypeFn(type){
             this.type = type
						//  console.log(type);
			 }

		},

  //  todo ===== 根据类型 计算需要传的 数组数据 给 main 组件
		computed: {
			  showList() {
           if(this.type === 'two'){
              return this.list.filter(item => item.isDone === false)
				}else if(this.type === 'three'){
              return this.list.filter(item => item.isDone === true)           
				}else{
					   return this.list
				}
				}
		},

//  todo  ====== 深度侦听 数据 存入本地存储
		watch: {
			 list: {
				  deep: true,
					handler(newVal) {
						 localStorage.setItem('Vue_todos', JSON.stringify(newVal))
					}
			 }
		}
};
</script>
